<template>
    <div class="live" id="index">
        <el-row class="box-contain top-head">
            <el-col :span="5">
                <div class="top-col tac fs0">
                    <!-- <a href="http://www.sczzyf.com" target="_blank" title="富盈"><img src="../assets/logo.png" alt="富盈" height="40"></a> -->
                    <img src="../assets/logo.png" alt="红色K线" height="80">
                </div>
            </el-col>
            <el-col :span="14">
                <div class="top-col slogon">{{slogon}}</div>
            </el-col>
            <el-col :span="5">
                <div class="top-col logined-user" v-if="logined">当前登录：{{loginedUser}}
                    <el-button class="logout" @click="exit" size="mini">退出登录</el-button>
                </div>
                <div class="top-col tac logoin-contain" v-else>
                    <el-button class="login-btn" type="primary" @click="showSecretLoginDialog">登录</el-button>
                    <el-button type="success" @click="regTips">注册</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="box-contain chat-contain">
            <el-col :span="16" style="box-sizing: border-box;">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <div class="online-num ml-10">在线会员({{onlineNumber+2}})</div>
                        <el-scrollbar class="chat-scrollbar online-user-scrollbar ml-10">
                            <ul class="online-user">
                                <li><img src="../assets/anchor.png" alt=""><span class="u-name u-t">{{teacher}}</span></li>
                                <li><img src="../assets/support.png" alt=""><span class="u-name u-t">直播助理</span></li>
                                <li v-for="item in onlineUser" :key="item.userId" @click="copyNickname(item.name)">
                                    <!-- <img src="../assets/vip.png" alt=""> -->
                                    <span :class="['level', formatLevel(item.level)]">{{item.level || '普通'}}</span><span class="u-name">{{item.name || '-'}}</span>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </el-col>
                    <el-col :span="18">
                        <div class="live-box-contain">
                            <div class="free-tips" v-if="live && !logined">免费观看时长：{{'0' + freeTime.minute}}:{{freeTime.second
                                < 10 ? ( '0' + freeTime.second): freeTime.second}}</div>
                                    <video-player id="live" class="video-player-box vjs-custom-skin" :options="playerOptions" :playsinline="true" ref="videoPlayer"></video-player>
                            </div>
                            <div id="switcher" v-if="live">
                                <div class="quality-contain">
                                <ul class="quality-list">
                                    <li v-for="(item, index) in qualityList" @click="setQuality(item)">{{item.label}}</li>
                                </ul>
                                <span class="quality-name">{{quality}}</span>
                                </div>
                            </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="9">
                        <el-tabs v-model="activeName" class="tabs">
                            <el-tab-pane label="直播公告" name="first">
                                <div class="public-content">
                                    <!-- <div class="live-title">直播公告</div> -->
                                    <div class="live-text">{{announcement}}</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="联系助理" name="second">
                                <div class="public-content">
                                    <!-- <div class="live-title">免责声明</div> -->
                                    <div class="live-text"><img class="qrcode" :src="UPLOAD_URL+qrcode" alt=""></div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="免责声明" name="third">
                                <div class="public-content">
                                    <!-- <div class="live-title">免责声明</div> -->
                                    <div class="live-text">{{disclaimer}}</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="版权申明" name="fourth">
                                <div class="public-content">
                                    <!-- <div class="live-title">版权申明</div> -->
                                    <div class="live-text">{{copyright}}</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                    <el-col :span="15">
                        <div class="banners">
                            <el-carousel trigger="click">
                                <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                                    <img class="banner" :src="UPLOAD_URL+item.imageUrl" alt="">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8">
                <div class="chat-box">
                    <el-scrollbar class="chat-scrollbar" ref="componentScrollBar">
                        <ul class="c-list">
                            <li v-for="(item, index) in messageLists" :key="index">
                                <span class="msg-time">{{formatMsgDate(item.createTime)}}</span>
                                <span :class="['level', item.admin?formatAdmin(item.name):formatLevel(item.level)]">{{item.admin? '' : (item.level || '普通')}}</span>
                                <span :class="['nickname',item.admin?'u-t':'']">{{item.admin ? (item.name == '主播老师' ? teacher : '直播助理' ) : item.name}}：</span>
                                <span :class="['chat-msg-item',item.admin ? 'u-t-b' : '']" v-html="formatChatText(item.content)"></span>
                            </li>
                        </ul>
                    </el-scrollbar>
                </div>
                <div class="chat-feat">
                    <div class="emoji-contain">
                        <div class="emoji-wrap" v-show="showEmoji">
                            <img v-for="(item,index) in emoji" :key="index" :src="'/static/qqFace/'+index+'.gif'" :alt="item" width="24" height="24" @click="addEmoji2Chat('['+item+']')" :title="item">
                        </div>
                        <i class="smile-o" @click="showEmoji=!showEmoji"></i>
                    </div>
                    <div class="setname" v-if="showNickname">
                        <el-input v-model="nicknameInput" placeholder="请输入昵称" auto-complete="on"></el-input>
                    </div>
                    <div class="clearfix">
                        <div class="chat-scrollbar cs-textarea">
                            <textarea v-model.trim="msg" name="" maxlength="40" placeholder="这里输入聊天内容" ref="textarea" rows="2" @keyup.enter="sendMsg"></textarea>
                        </div>
                        <div class="b-btn" @click="sendMsg">发送</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="登录" :visible.sync="loginDialog" center width="300px" @close="closeLoginDialog">
            <el-form :model="form" label-width="80px">
                <el-form-item label="手机号码">
                    <el-input v-model.trim="form.username" :maxlength="11" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-input class="verification-input" v-model.trim="form.code" :maxlength="4" placeholder="请输入验证码"></el-input>
                    <el-button type="warning" class="get-code" @click="getCode" :disabled="isClickGetCode" ref="code">获取验证码</el-button>
                </el-form-item> -->
                <el-form-item label="邀请码">
                    <el-input v-model.trim="form.code" :maxlength="11" placeholder="请输入邀请码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getLogin">登 录</el-button>
            </div>
        </el-dialog>
        <el-dialog title="设置昵称" :visible.sync="nickDialog" center width="300px" @close="closeNickDialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <el-form :model="form">
                <el-form-item label="昵称">
                    <el-input v-model.trim="nickName" :maxlength="8" placeholder="请输入昵称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="setName">确 定</el-button>
            </div>
        </el-dialog>
        <el-button class="class-btn fixed-btn" type="success" @click="classDialog = true" icon="el-icon-date">课程安排</el-button>
        <el-button class="teacher-btn fixed-btn" type="success" @click="teacherDialog = true" icon="el-icon-tickets">老师介绍</el-button>
        <el-dialog title="课程安排" :visible.sync="classDialog" center width="800px">
            <img :src="UPLOAD_URL+course" alt="" class="course-img">
        </el-dialog>
        <el-dialog title="老师介绍" :visible.sync="teacherDialog" center width="800px">
            <img :src="UPLOAD_URL+teacherIntro" alt="" class="course-img">
        </el-dialog>
    </div>
</template>
<script>
import {
    getConfig,
    postSMS,
    loginByCode,
    loginBySecretKey,
    loginByUserCode,
    getMessages,
    postMessage,
    setNickName,
    getOnlineUser,
    getOnlineUserCount,
    getLiveBannerList
} from '@/api/api'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash/dist/videojs-flash')
require('videojs-contrib-hls/dist/videojs-contrib-hls')
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import emoji from '@/assets/js/emoji.js'

export default {
    data() {
        return {
            playerOptions: {
                height: '100%',
                overNative: false,
                sourceOrder: true,
                autoplay: true, //自动播放
                techOrder: ['html5', 'flash'], // 兼容顺序
                sources: null,
                controlBar: { //控制栏
                    timeDivider: false, // 时间分割线
                    remainingTimeDisplay: false, //显示剩余时间
                    progressControl: false, //进度条
                    durationDisplay: false //总时间
                },
                flash: {
                    hls: { withCredentials: false },
                    swf: '/static/media/VideoJS.swf' //使用自己的flash播放器
                },
                html5: { hls: { withCredentials: false } },
                poster: "/static/poster.jpg", //默认封面
            },
            messageLists: [],
            logined: false,
            loginDialog: false,
            form: {
                username: '',
                code: ''
            },
            isClickGetCode: false,
            timer: null,
            second: 60, //默认时间
            msg: '',
            loginedUser: '',
            nickDialog: false,
            nickName: '',
            emoji: emoji,
            showEmoji: false,
            componentScrollBar: null,
            announcement: '',
            StudioName: '',
            onlineUser: [],
            onlineNumber: 0, //在线会员
            freeTime: {
                minute: 4,
                second: 60
            },
            freeTimer: null,
            shouldFresh: false,
            live: false,
            showNickname: false,
            nicknameInput: '',
            activeName: 'first',
            slogon: '',
            copyright: '',
            disclaimer: '',
            bannerList: [],
            videosUrl: '',
            teacher: '',
            qrcode: '',
            course: '',
            classDialog: false,
            teacherDialog: false,
            teacherIntro: '',
            freeTips: '',
            watchTimer: null,
            quality: '原画',
            qualityList: [{
                    src: "rtmp://live.sczzyf.com/live/live",
                    type: "video/mp4",
                    label: "原画"
                },{
                    src: "rtmp://live.sczzyf.com/live/live_lud",
                    type: "video/mp4",
                    label: "超清"
                },
                {
                    src: "rtmp://live.sczzyf.com/live/live_lhd",
                    type: "video/mp4",
                    label: "高清"
                },
                {
                    src: "rtmp://live.sczzyf.com/live/live_lsd",
                    type: "video/mp4",
                    label: "标清"
                },
                {
                    src: "rtmp://live.sczzyf.com/live/live_lld",
                    type: "video/mp4",
                    label: "流畅"
            }]
        }
    },
    components: {
        videoPlayer
    },
    computed: {
        classOption: function() {
            return {
                step: 0.5
            }
        },
        optionLeft() {
            return {
                step: 1,
                direction: 3,
                limitMoveNum: 3
            }
        }
    },
    sockets: {
        connect: function() {
            console.log('聊天服务器连接成功')
            console.log(this.APPID)
            this.$socket.emit('bind', this.APPID)
        },
        binded: function() {
            console.log('APPID bind 成功,开始登录socket服务器')
            var token = sessionStorage.getItem('token');
            if (token) {
                this.$socket.emit('login', token)
            }
        },
        disconnect: function() {
            console.log('聊天服务器断开连接')
            this.$notify({
                message: '聊天服务器断开连接,尝试重连中...',
                type: 'error'
            })
        },
        connect_error: function(e) {
            console.log('聊天服务器连接出错，错误信息:' + e)
            this.$notify({
                message: '聊天服务器连接出错,尝试重连中...',
                type: 'error'
            })
        },
        reconnect: function() {
            console.log('聊天服务器重连中...')
            this.$notify({
                message: '聊天服务器重连中...',
                type: 'info'
            })
        },
        reconnect_failed: function() {
            console.log('聊天服务器重连失败')
            this.$notify({
                message: '聊天服务器重连失败',
                type: 'error'
            })
        },
        send_fail: function(msg) {
            console.log('消息发送失败,错误提示:' + msg)
            this.$notify({
                message: '消息发送失败',
                type: 'error'
            })
        },
        config_update: function(status) {
            if (status.live) {
                var s = JSON.parse(status.live)
                if (s) {
                    console.log('直播开启')
                    this.live = true;
                    this.playerOptions.sources = [{ //流配置，数组形式，会根据兼容顺序自动切换
                        type: "rtmp/mp4",
                        src: "rtmp://live.sczzyf.com/live/live"
                    }, {
                        withCredentials: false,
                        type: "application/x-mpegURL",
                        src: "http://live.sczzyf.com/live/live.m3u8"
                    }]
                } else {
                    console.log('直播关闭')
                    this.live = false;
                    this.playerOptions.loop = true;
                    this.playerOptions.controlBar.progressControl = true;
                    this.playerOptions.sources = [{
                        type: "video/mp4",
                        src: this.videosUrl
                    }]
                    console.log(this.playerOptions.sources)
                }
            }
        },
        logined: function(val) {
            if (val == '0') {
                console.log('聊天服务器登录失败')
                this.$notify({
                    message: '聊天服务器登录失败，请刷新重试',
                    type: 'error'
                })
            } else {
                console.log('聊天服务器登录成功')
                this.$notify({
                    message: '聊天服务器登录成功',
                    type: 'success'
                })
            }
        },
        message: function(val) {
            console.log('收到消息:', val)
            if (val.appId == this.APPID) {
                this.messageLists.push(val)
                this.$nextTick(() => {
                    this.componentScrollBox.scrollTop = this.componentScrollBox.scrollHeight;
                })
            }
        }
    },
    created: function() {
        var loginTime = +sessionStorage.getItem('loginTime') || 0;
        var now = new Date().getTime()
        if (now - loginTime > 604800000) {
            sessionStorage.clear()
        }
        var token = sessionStorage.getItem('token');
        var userObj = sessionStorage.getItem('user') || '{}';
        var user = JSON.parse(userObj);
        this.showNickname = user.salesman;
        if (token && user.name) {
            this.logined = true;
            this.loginedUser = user.name;
        }

        // sessionStorage.clear()

        this.getMessageList()
        // this.msgTimeout = setInterval(() => {
        //     this.getMessageList()
        // }, 10000)
        this.getUsers();
        this.getBannerList()
        this.watchTimer = setInterval(() => {
            this.$socket.emit('add_time', 2)
        }, 2 * 60000)
    },
    mounted: function() {
        var _this = this;
        document.addEventListener('click', function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if (_this.showEmoji && target.className != 'smile-o') {
                _this.showEmoji = false;
            }
        }, false)
        this.componentScrollBox = this.$refs.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
        getConfig('live,videosUrl,StudioName,announcement,slogon,copyright,disclaimer,teacher,qrcode,course,teacherIntro,freeTips').then(res => {
            // 切换html-title
            document.getElementById('html-title').innerHTML = res.StudioName;
            this.announcement = res.announcement;
            this.StudioName = res.StudioName;
            this.slogon = res.slogon;
            this.disclaimer = res.disclaimer;
            this.copyright = res.copyright;
            this.teacher = res.teacher;
            this.qrcode = res.qrcode;
            this.course = res.course;
            this.teacherIntro = res.teacherIntro;
            this.freeTips = res.freeTips;

            var live = JSON.parse(res.live);
            this.live = live;
            this.videosUrl = res.videosUrl
            if (!live) {
                this.playerOptions.loop = true;
                this.playerOptions.controlBar.progressControl = true;
                this.playerOptions.sources = [{
                    type: "video/mp4",
                    src: res.videosUrl
                }]
            } else {
                this.playerOptions.sources = [{ //流配置，数组形式，会根据兼容顺序自动切换
                    type: "rtmp/mp4",
                    src: "rtmp://live.sczzyf.com/live/live"
                }, {
                    withCredentials: false,
                    type: "application/x-mpegURL",
                    src: "http://live.sczzyf.com/live/live.m3u8"
                }]
                var token = sessionStorage.getItem('token');
                if (!token) {
                    //直播观看5分钟
                    var freeTime = JSON.parse(localStorage.getItem('ft')) || this.freeTime;
                    var ftMin = freeTime.minute;
                    var ftSec = freeTime.second;
                    var _this = this;
                    if (ftMin == 0 && ftSec == 0) {
                        //提示登录
                        this.freeTime = {
                            minute: 0,
                            second: 0
                        }
                        this.$refs.videoPlayer.dispose();
                        this.$alert(this.freeTips, '提示');
                        return;
                    } else {
                        this.freeTimer = setInterval(function() {
                            if (ftSec > 0) {
                                ftSec -= 1;
                            } else {
                                if (ftMin == 0) {
                                    clearInterval(_this.freeTimer)
                                    _this.freeTimer = null;
                                    _this.$refs.videoPlayer.dispose();
                                    _this.$alert(_this.freeTips, '提示');
                                    return;
                                }
                                ftMin -= 1;
                                ftSec = 60;

                            }
                            _this.freeTime = {
                                minute: ftMin,
                                second: ftSec
                            }
                            localStorage.setItem('ft', JSON.stringify(_this.freeTime))
                        }, 1000)
                    }
                }
            }
        })
    },
    methods: {
        getBannerList: function() {
            getLiveBannerList().then(res => {
                this.bannerList = res.list;
            })
        },
        getUsers: function() {
            getOnlineUser().then(res => {
                this.onlineUser = res;
            })
            getOnlineUserCount().then(res => {
                this.onlineNumber = res;
            })
        },
        formatMsgDate: function(time) {
            var date = new Date(time);
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            return hours + ':' + mins;
        },
        getMessageList: function() {
            getMessages().then(res => {
                this.messageLists = res;
                this.$nextTick(() => {
                    this.componentScrollBox.scrollTop = this.componentScrollBox.scrollHeight;
                })
            })
        },
        showSecretLoginDialog: function() {
            this.loginDialog = true;
        },

        timeout: function() {
            this.isClickGetCode = false;
            clearInterval(this.timer);
            this.timer = null;
        },
        getLogin: function() {
            if (!this.form.username) {
                this.$message({
                    type: 'error',
                    message: '请输入账号'
                })
                return;
            }
            if (!this.form.code) {
                this.$message({
                    type: 'error',
                    message: '请输入邀请码'
                })
                return;
            }
            loginByUserCode(this.form).then(res => {
                console.log(res)
                localStorage.removeItem('ft')
                sessionStorage.setItem('token', res.token)
                sessionStorage.setItem('user', JSON.stringify(res.user))
                sessionStorage.setItem('loginTime', new Date().getTime())
                if (!res.user.name) {
                    this.nickDialog = true;
                    return;
                } else {
                    this.$message({
                        type: 'success',
                        message: '登录成功'
                    })
                    this.logined = true;
                    this.loginedUser = res.user.name;
                    this.closeLoginDialog()
                    this.$socket.emit('login', res.token)
                    this.getUsers();
                }
                this.isClickGetCode = false;
                this.showNickname = res.user.salesman;
                sessionStorage.setItem('s', 1)
                clearInterval(this.freeTimer)
                this.freeTimer = null;
                this.second = 0;
                if (this.shouldFresh) {
                    this.$router.go(0)
                }
            })
        },
        closeLoginDialog: function() {
            this.loginDialog = false;
            this.timeout()
        },
        sendMsg: function() {
            if (!this.logined) {
                this.showSecretLoginDialog();
                return;
            }
            if (!this.msg) {
                return;
            }
            var name = '';
            if (this.showNickname) {
                name = this.nicknameInput || this.loginedUser
            } else {
                name = this.loginedUser
            }
            var msg = {
                content: this.msg,
                name: name
            }
            this.$socket.emit('send', msg)
            console.log('发送的消息:', msg)
            this.msg = '';
            this.nicknameInput = '';
        },
        closeNickDialog: function() {
            this.nickDialog = false;
        },
        setName: function() {
            if (!this.nickName) {
                this.$message({
                    type: 'error',
                    message: '请输入昵称'
                })
                return;
            }
            setNickName(this.nickName).then(res => {
                this.closeNickDialog()
                this.$message({
                    type: 'success',
                    message: '登录成功'
                })
                this.logined = true;
                this.closeLoginDialog()
                this.isClickGetCode = false;
                sessionStorage.setItem('s', 1)
                this.second = 0;
                this.getUsers();
            })
        },
        formatChatText: function(text) {
            if (!text) {
                return text;
            }

            text = text.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi, function(word) {
                var newWord = word.replace(/\[|\]/gi, '');
                var index = emoji.indexOf(newWord);
                var imgHTML = '';
                if (index < 0) {
                    return word;
                }

                imgHTML = `<img width="24" height="24" style="vertical-align: middle;" title="${newWord}" src="/static/qqFace/${index}.gif" alt="${newWord}">`
                return imgHTML;
            });
            return text;
        },
        addEmoji2Chat: function(name) {
            var textDom = this.$refs.textarea;
            var cursorPos = 0; //光标位置
            if (document.selection) {
                // IE Support
                var selectRange = document.selection.createRange();
                selectRange.moveStart('character', -this.msg.length);
                cursorPos = selectRange.text.length;
            } else if (textDom.selectionStart || textDom.selectionStart == '0') {
                // Firefox support
                cursorPos = textDom.selectionStart;
            }
            if (cursorPos != this.msg.length) {
                //光标位置不是在最后
                var msgArr = this.msg.split(''); //分隔成数组
                msgArr.splice(cursorPos, 0, name) //在光标位置插入emoji
                this.msg = msgArr.join(''); //转回字符串
            } else {
                this.msg += name;
            }
            this.showEmoji = false;
        },
        regTips: function() {
            this.$alert(this.freeTips, '提示')
        },
        exit: function() {
            this.$confirm('确定要退出当前登录账号?', '退出登录', {
                closeOnClickModal: false
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出成功'
                })
                sessionStorage.clear()
                clearInterval(this.freeTimer)
                this.freeTimer = null;
                setTimeout(() => {
                    this.$router.go(0)
                }, 2000)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
        copyNickname: function(nickname) {
            if (this.showNickname) {
                this.nicknameInput = nickname;
            }
        },
        formatLevel: function(level) {
            switch (level) {
                case '黄金':
                    return 'lv2'
                case '白银':
                    return 'lv1'
                case '普通':
                    return 'lv0'
                default:
                    return 'lv0'
            }
        },
        formatAdmin: function(name) {
            if (name == '主播老师') {
                return 'lv-t'
            } else if (name == '直播助理') {
                return 'lv-s'
            }
        },
        showClassDialog: function() {
            this.classDialog = true;
        },
        setQuality: function(item){
            this.quality = item.label;
            this.playerOptions.sources = [{
                type: "rtmp/mp4",
                src: item.src
            }]
        }
    },
    beforeDestroy: function() {
        this.$refs.videoPlayer.dispose();
        clearInterval(this.msgTimeout);
        clearInterval(this.freeTimer)
        clearInterval(this.timer)
    },
    destroyed: function() {
        this.timeout()
        clearInterval(this.msgTimeout);
        clearInterval(this.freeTimer)
        clearInterval(this.timer)
        clearInterval(this.watchTimer)
        this.watchTimer = null;
        this.msgTimeout = null;
        this.freeTimer = null;
    }
}

</script>
<style scoped>
.tac {
    text-align: center;
}

.top-col {
    min-height: 80px;
    padding: 10px 0;
}

.logoin-contain {
    line-height: 80px;
}

.slogon {
    text-align: center;
    color: #fff;
    font-size: 46px;
    font-weight: bold;
    line-height: 80px;
    font-style: italic;
}

.logined-user {
    line-height: 80px;
    text-align: center;
    color: #fff;
}

.fs0 {
    font-size: 0;
}

.top-head {
    background-color: rgba(31, 22, 11, 0.4);
    border-bottom: 3px solid #f1eb34;
}

.login-btn {
    background-color: #1569c7;
    border-color: #1569c7;
}

.chat-contain {
    margin-top: 10px;
}

.box-contain {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.live-box-contain {
    height: 591px;
    background-color: #000;
    position: relative;
}

.free-tips {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    z-index: 9;
}

.live-scrollbar {
    height: 100%;
}

.seamless-warp {
    height: 100%;
    overflow: hidden;
}


.chat-box {
    height: 700px;
    padding: 5px 0;
    background-color: rgba(241, 230, 230, 0.2);
    border-radius: 5px;
}

.chat-scrollbar {
    height: 100%;
}

.c-list {
    width: 100%;
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
}

.c-list li {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    line-height: 20px;
    color: #555;
}

.msg-time {
    color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
    display: inline-block;
    background-color: #000;
    border-radius: 3px;
    margin: 0 5px;
    box-shadow: 2px 2px 2px #666;
}

.nickname {
    color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
    display: inline-block;
    background-color: #2b6cb1;
    border-radius: 3px;
    box-shadow: 2px 2px 2px #666;
    margin-left: 5px;
    margin-right: 5px;
}

.chat-msg-item {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #fff;
    border-radius: 3px;
    word-break: break-all;
    word-wrap: break-word;
    box-shadow: 2px 2px 2px #666;
    color: #000;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

.chat-feat {
    margin-top: 10px;
    background-color: rgba(241, 230, 230, 0.2);
    border-radius: 3px;
}

.chat-feat .cs-textarea {
    width: calc(100% - 80px);
    box-sizing: border-box;
    height: 60px;
    padding: 5px;
    border: 1px solid #ff921a;
    border-right: none;
    border-radius: 4px 0 0 4px;
    line-height: 20px;
    float: left;
    overflow: hidden;
}

.cs-textarea textarea {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    outline: none;
    border: none;
    overflow: hidden;
    color: #333;
    resize: none;
}

.chat-feat .b-btn {
    display: block;
    width: 80px;
    height: 60px;
    line-height: 60px;
    border-radius: 0 4px 4px 0;
    background: #f70;
    color: #fff;
    float: left;
    text-align: center;
    cursor: pointer;
}

.login-inside {
    height: 47px;
    line-height: 47px;
    color: #919191;
    background: #fff;
    border: 1px solid #ff921a;
    border-radius: 3px;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
    margin: 10px 0 0;
}

.is-log {
    cursor: pointer;
    text-decoration: underline;
    color: #ff921a;
}

.verification-input {
    width: 140px;
    float: left;
}

.get-code {
    width: 100px;
    float: right;
    font-size: 14px;
    padding: 12px 5px;
}

.clearfix {
    overflow: hidden;
    zoom: 1;
}

/*在线会员*/

.online-num {
    margin-left: 10px;
    text-align: center;
    padding: 10px;
    background-color: rgba(241, 230, 230, 0.3);
    font-weight: bold;
    color: #e00b0b;
}

.ml-10 {
    margin-left: 10px;
}

.online-user-scrollbar {
    height: 550px;
}

.online-user {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgba(241, 230, 230, 0.3);
    overflow: hidden;
    zoom: 1;
}

.online-user li {
    margin: 5px;
}

.online-user li img {
    vertical-align: middle;
}

.u-name {
    vertical-align: middle;
    margin-left: 5px;
    font-size: 14px;
    cursor: pointer;
}

.u-t {
    color: #e20404;
}

.u-t-b {
    color: #e20404;
    font-weight: bold;
    font-size: 18px;
}

.level {
    display: inline-block;
    width: 46px;
    height: 16px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.lv0 {
    background: url(../assets/lv0.png) no-repeat center;
}

.lv1 {
    background: url(../assets/lv2.gif) no-repeat center;
}

.lv2 {
    background: url(../assets/level.gif) no-repeat center;
}

.lv-t {
    background: url(../assets/anchor.png) no-repeat center;
}

.lv-s {
    background: url(../assets/support.png) no-repeat center;
}


/*tabs*/

.tabs {
    /*width: 100%;*/
    min-height: 230px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: rgba(241, 230, 230, 0.3);
}


/*公告*/

.live-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
}

.live-text {
    line-height: 1.5;
    font-weight: bold;
    color: #ff0000;
}

.public-content {
    box-sizing: border-box;
    padding: 0 10px;
}

/*banner*/

.banners {
    height: 230px;
    margin-top: 10px;
}
.banners .el-carousel {
    height: 100%;
}

.el-carousel__item .banner {
    width: 100%;
    height: 100%;
}

/*emoji*/

.emoji-contain {
    position: relative;
    padding: 5px;
}

.smile-o {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../assets/smile.png) no-repeat center center;
    background-size: cover;
    margin: 0 5px;
}
.emoji-wrap {
    position: absolute;
    bottom: 30px;
    left: 0;
    border: 1px solid #bdbdbd;
    z-index: 99;
    background-color: #fff;
}

/*退出*/

.logout {
    background-color: #d80d0d;
    color: #fff;
    border-color: #d80d0d;
    margin-left: 10px;
}

/*qrcode*/
.qrcode {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: block;
}

/*昵称设置*/
.setname {
    margin: 5px;
}

/*节目表*/

.fixed-btn {
    width: 120px;
    position: fixed;
    right: 10px;
    transition: all .3s ease-in-out;
}

.class-btn {
    bottom: 110px;
    background-color: #ff0000;
    border-color: #ff0000;
}

.teacher-btn {
    bottom: 160px;
    background-color: #ff0000;
    border-color: #ff0000;
}

.class-btn:hover {
    transform: translateX(-10px);
    background-color: #3a8ee6;
    border-color: #3a8ee6;
}

.teacher-btn:hover {
    transform: translateX(-10px);
    background-color: #3a8ee6;
    border-color: #3a8ee6;
}

.course-img {
    width: 100%;
}

@media screen and (max-width: 1366px) {
    .live-box-contain {
        height: 340px;
    }
    .chat-box {
        height: 391px;
    }
    .online-user-scrollbar {
        height: 299px;
    }
    .banners {
        height: 181px;
    }
    .live-text {
        font-size: 12px;
    }
    .qrcode {
        width: 120px;
        height: 120px;
    }
    .tabs {
        min-height: 180px;
    }
}
#switcher{
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 5px;
    text-align: center;
}
.quality-list{
    width: 50px;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    color: #fff;
    list-style: none;
    background-color: #000;
}
.quality-name{
    width: 42px;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
}
#switcher:hover .quality-list{
    opacity: 1;
}
</style>
